<template>
    <div class="iframe_container">
        <div class="header">
            <div v-for="(item, index) in ['电脑', '平板', '手机']" :key="item"
                :class="['header_item', active == index ? 'active' : '']" @click="clickItem(item, index)">{{ item }}
            </div>
        </div>

        <iframe
            :class="[iframeClass]"
            :src="url"
            scrolling="auto"
            frameborder="0"
            marginwidth="0"
            marginheight="0"
        ></iframe>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router'

const router = useRouter();
const route = useRoute();

const url = computed(() => location.origin + '/browse')

const activeType = {
    'computer': 0,
    'android': 1,
    'phone': 2,
}
const iframeClass = ref(route.query.type);
const active = ref(activeType[route.query.type])

const clickItem = (item, index) => {
    active.value = index;
    switch (item) {
        case '电脑':
            iframeClass.value = 'computer';
            router.push({ path: '/iframe', query: {type: 'computer'} })
            break;
        case '平板':
            iframeClass.value = 'android';
            router.push({ path: '/iframe', query: {type: 'android'} })
            break;
        case '手机':
            iframeClass.value = 'phone';
            router.push({ path: '/iframe', query: {type: 'phone'} })
            break;
        default:
            break;
    }
}
</script>

<style lang="scss" scoped>
.iframe_container {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;

    .header {
        height: 50px;
        width: 100%;
        background: #eee;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        .header_item {
            width: 50px;
            height: 100%;
            line-height: 50px;
            text-align: center;
            transition: all 0.3s;

            &:hover {
                cursor: pointer;
                background: #aaa;
                color: #fff;
            }
        }

        .active {
            background: #aaa;
            color: #fff;
        }
    }

    &::-webkit-scrollbar {
        height: 4px;
        width: 0px;
    }

    iframe {
        &::-webkit-scrollbar {
            height: 4px !important;
            width: 8px !important;
        }

        &:hover::-webkit-scrollbar-thumb {
            background-color: #484848;
            border-radius: 8px;
        }
    }
}

.computer {
    width: 100%;
    height: calc(100% - 50px);
}

.android {
    width: 1024px;
    height: 1024px;
}

.phone {
    width: 512px;
    height: 836px;
    margin-top: 30px;
}
</style>